<template>
    <div>
        <!-- 搜素栏 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="护士名称">
                <el-input v-model="formInline.name" placeholder="请输入查询名称" />
            </el-form-item>
            <el-form-item label="护士科室">
                <el-input v-model="formInline.department" placeholder="请输入科室" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 表单页面 -->
        <el-table :data="nurseList" style="width: 100%">
            <el-table-column prop="name" label="护士姓名" />
            <el-table-column prop="department" label="所属科室" />
            <el-table-column prop="head" label="护士头像">
                <template #default="scope">
                    <el-image style="width: 50px; height: 50px" :src="scope.row.head" fits="fill" />
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column prop="sex" label="性别" />
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-model:current-page="pageinfo.page" v-model:page-size="pageinfo.size"
            :page-sizes="[100, 200, 300, 400]" small="small" background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>

</template>

<script setup lang="ts">
import { reactive, watch, watchEffect, computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore()

// 定义搜索栏数据
const formInline = reactive({
    name: '',
    department: ''
})
// 定义数据
const pageinfo = reactive({
    page: 1,
    size: 10
})
// 从vuex取数据渲染页面
const total = computed(() =>{
    return store.state.nurse.total
})
const nurseList = computed(() =>{
    return store.state.nurse.nurseList
})
//  定义方法把数据传给vuex
const getDocList =  () => {
    store.dispatch('nurse/A_getNurseList',pageinfo)
}
// 进页面就把数据传给vuex
watchEffect(getDocList)
// 点击查询
const onSubmit = () => {
    //处理数据 如果为空字符串或者null就不把数据发过去
    for (const key in formInline) {
        if (formInline[key] === '' || formInline[key] === null) delete formInline[key]
    }
   store.dispatch('nurse/A_onSubmit',{...pageinfo,...formInline})

}

// 两者中任意一个发生变化都重新去查询商品列表
// watch([pageinfo, formInline], getDocList, { deep: true })


</script>

<style scoped lang="scss">

</style>